<template>
  <div class="el-card zk-searcher">
    <el-row>
      <el-col :span="20">
        <el-form ref="formRef" :label-width="itemLabelWidth" inline>
          <el-row>
            <el-col v-for="option of options" :key="option.key" :span="option.span || colSpan">
              <el-form-item :label="option.label" :prop="option.key" size="small">
                <item-pool
                  v-if="!!option.rangeKeys"
                  :from-value="model[option.rangeKeys[0]]"
                  :to-value="model[option.rangeKeys[1]]"
                  :option="option"
                  style="max-width: 220px"
                  @onChange="v=>rangeItemChange(v,option.rangeKeys)"
                />
                <item-pool v-else v-model="model[option.key]" :option="option" style="max-width: 200px" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="4">
        <div class="submit-btn">
          <el-button type="primary" size="medium" @click="search">查询</el-button>
          <el-button size="medium" plain @click="resetForm">重置</el-button>
          <slot name="button"></slot>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { TYPE_ENUM } from '@/common/zk-constants'
  import ItemPool from '@/components/zk-item-pool'

  export default {
    name: 'ZkSearcher',
    components: { ItemPool },
    model: {
      prop: 'query',
      event: 'onQuery'
    },
    props: {
      options: {
        type: Array,
        required: false,
        default: () => []
      },
      query: {
        type: Object,
        default: () => ({}),
      },
      propItemWidth: {
        type: String,
        default: null,
      },
      onQuery: {
        type: Object,
        required: false,
        default: () => ({})
      },
    },
    data() {
      const model = {}
      this.options.forEach(opt => {
        const { key, rangeKeys } = opt
        if (rangeKeys) {
          const [from, to] = rangeKeys
          model[from] = this.query[from]
          model[to] = this.query[to]
        } else {
          model[key] = this.query[key] || ''
        }
      })
      return {
        TYPE_ENUM,
        model,
      }
    },
    computed: {
      colSpan() {
        const maxLabelLength = this.options.map(e => e.label.length)
        return Math.max(...maxLabelLength) > 6 ? 12 : 8
      },
      itemLabelWidth() {
        return this.propItemWidth || (this.colSpan === 12 ? '8vw' : '6vw')
      },
    },
    methods: {
      search() {
        this.$emit('onQuery', { ...this.model, currentPage: 1 })
      },
      resetForm() {
        this.options.forEach(opt => {
          const { key, rangeKeys } = opt
          if (rangeKeys) {
            const [from, to] = rangeKeys
            this.model[from] = ''
            this.model[to] = ''
          } else {
            this.model[key] = ''
          }
        })
        this.search()
      },
      rangeItemChange([from, to] = [], [fromKey, toKey] = []) {
        this.model[fromKey] = from
        this.model[toKey] = to
      }
    },
  }
</script>
<style scoped lang="scss">
  .zk-searcher {
    position: relative;
    overflow: unset;
    padding: 20px 20px 2px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .submit-btn {
      position: absolute;
      bottom: 18px;
      right: 20px;
    }

    .submit-btn {
      text-align: center;
    }

    .el-form-item.el-form-item--small {
      white-space: nowrap;
    }
  }
</style>
